SlideShare a Scribd company logo
1 of 37
Download to read offline
HTML5
•
• HTML5
•
•
•
•

•

• JavaScript -> perl -> Flash
           -> PHP -> JAVA ->

•

• OSGeo
HTML5
W3C                   WHATWG
        WWW                    Apple,Mozilla,Opera

1997    HTML4
2000   XHTML1.0
2002   XHTML2.0
                              HTML4
2004                           W3C


2007              HTML5
2008   HTML5
2012   HTML5          (   )
                  ※
HTML4         XHTML
       XHTML2



• img , br
  =>            IE6




       XHTML2
W3C                   WHATWG
        WWW                    Apple,Mozilla,Opera

1997    HTML4
2000   XHTML1.0
2002   XHTML2.0
                              HTML4
2004                           W3C


2007              HTML5
2008   HTML5
2012   HTML5          (   )
                  ※
HTML5
•
•
• Local
 Flash    Gears
HTML5
HTML5


HTML5
•
• HTML4
   <= IE6
Web


• Flex AIR          DL

• Gears Flash   JavaScript

•
    HTML5          API
HTML5
  API
            HTML5


WebSockets API                 WebWorkers
                                                .......
           .......   HTML5
                                  Web Storage
  HTML5 2D Context
                               Web SQL Database
Server-Sent Events
                     .......          .......
GPS


            GPS
      GPS
GPS
        GPS
GPS



      GPS
Network
                GPS
          GPS
DEMO
•http://wakasa.org/sample/infotalk17/dd/
•http://html5demos.com/offlineapp
GPS
      Network
DEMO
•http://webbie.bz/~usami/clock.html
•http://html5demos.com/video-canvas
•http://people.mozilla.com/~prouget/demos/tracker/
 tracker.xhtml
•http://people.mozilla.com/~vladimir/webgl/spore/
 sporeview.html
•http://code.google.com/p/quake2-gwt-port/
HTML5
<b><em><strong>


 <section>
DEMO
http://d.hatena.ne.jp/amachang/20090915/1252999677
<legend>

•
•
    <legend>   </legend>
Web Database ,Web Workers         API




             API DEMO
  •http://people.mozilla.com/~prouget/demos/
   worker_and_simulatedannealing/index.xhtml
  •http://ayuta.co.jp/html5-samples/database/simple/
   database1.html
Web Workers
JSON
DEMO
•http://tsuyobi.heteml.jp/html/firefox/
 orientation_event/index2.html
•http://html5demos.com/geo
PC




GPS

     WebKit
•
    =>

•           API

•
    => 3D
    =>
•        HTML5         API


    =>

•              Video
    WebSQLDatabase

• IE9
• IE6         × ■
HTML5



                  HTML5&API




                         HTML5



http://html5.jp
http://wakasa.org/sample/infotalk17/slide.pdf
    http://goo.gl/Hs1H (                 )




     masao.wakasa@connecty.co.jp

More Related Content

What's hot

Icinga Camp San Francisco 2017 - Icinga Director - Managing your configuration
Icinga Camp San Francisco 2017 - Icinga Director - Managing your configurationIcinga Camp San Francisco 2017 - Icinga Director - Managing your configuration
Icinga Camp San Francisco 2017 - Icinga Director - Managing your configuration
Icinga
 

What's hot (20)

Saluki - do it like a user
Saluki - do it like a userSaluki - do it like a user
Saluki - do it like a user
 
Icinga Camp Bangalore - Icinga2 and Ansible
Icinga Camp Bangalore - Icinga2 and AnsibleIcinga Camp Bangalore - Icinga2 and Ansible
Icinga Camp Bangalore - Icinga2 and Ansible
 
Ajax presentation
Ajax presentationAjax presentation
Ajax presentation
 
Rapid development with Rails
Rapid development with RailsRapid development with Rails
Rapid development with Rails
 
Icinga Camp San Diego 2016 - Icinga Director
Icinga Camp San Diego 2016 - Icinga DirectorIcinga Camp San Diego 2016 - Icinga Director
Icinga Camp San Diego 2016 - Icinga Director
 
Introduction into Icinga Web 2
Introduction into Icinga Web 2Introduction into Icinga Web 2
Introduction into Icinga Web 2
 
JHipster
JHipsterJHipster
JHipster
 
COSCUP 開源工作坊:Git workflows
COSCUP 開源工作坊:Git workflowsCOSCUP 開源工作坊:Git workflows
COSCUP 開源工作坊:Git workflows
 
Icinga Camp Bangalore - Welcome
Icinga Camp Bangalore - WelcomeIcinga Camp Bangalore - Welcome
Icinga Camp Bangalore - Welcome
 
Icinga Camp Amsterdam - Icinga Director
Icinga Camp Amsterdam - Icinga DirectorIcinga Camp Amsterdam - Icinga Director
Icinga Camp Amsterdam - Icinga Director
 
Icinga Camp Amsterdam - Icinga2 and Ansible
Icinga Camp Amsterdam - Icinga2 and AnsibleIcinga Camp Amsterdam - Icinga2 and Ansible
Icinga Camp Amsterdam - Icinga2 and Ansible
 
Icinga Camp San Diego: Apify them all
Icinga Camp San Diego: Apify them allIcinga Camp San Diego: Apify them all
Icinga Camp San Diego: Apify them all
 
WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки.
WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки.WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки.
WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки.
 
Icinga Camp Berlin 2017 - Welcome & State of Icinga
Icinga Camp Berlin 2017 - Welcome & State of IcingaIcinga Camp Berlin 2017 - Welcome & State of Icinga
Icinga Camp Berlin 2017 - Welcome & State of Icinga
 
Red Hat Summit 2015 : Drools, jBPM and UberFire Roadmaps
Red Hat Summit 2015 : Drools, jBPM and UberFire RoadmapsRed Hat Summit 2015 : Drools, jBPM and UberFire Roadmaps
Red Hat Summit 2015 : Drools, jBPM and UberFire Roadmaps
 
Enterprise Integration Patterns with Apache Camel
Enterprise Integration Patterns with Apache CamelEnterprise Integration Patterns with Apache Camel
Enterprise Integration Patterns with Apache Camel
 
IcingaCamp Stockholm - Icinga Web2
IcingaCamp Stockholm - Icinga Web2IcingaCamp Stockholm - Icinga Web2
IcingaCamp Stockholm - Icinga Web2
 
Icinga Camp Berlin 2018 - Dev and Ops Stories - Integrations++
Icinga Camp Berlin 2018 - Dev and Ops Stories - Integrations++Icinga Camp Berlin 2018 - Dev and Ops Stories - Integrations++
Icinga Camp Berlin 2018 - Dev and Ops Stories - Integrations++
 
Icinga Camp San Francisco 2017 - Icinga Director - Managing your configuration
Icinga Camp San Francisco 2017 - Icinga Director - Managing your configurationIcinga Camp San Francisco 2017 - Icinga Director - Managing your configuration
Icinga Camp San Francisco 2017 - Icinga Director - Managing your configuration
 
Azure Web Jobs
Azure Web JobsAzure Web Jobs
Azure Web Jobs
 

Viewers also liked

HTML5時代でもFlashとかを使い続ける漢達
HTML5時代でもFlashとかを使い続ける漢達HTML5時代でもFlashとかを使い続ける漢達
HTML5時代でもFlashとかを使い続ける漢達
Wakasa Masao
 

Viewers also liked (13)

Eddystone概要と事例
Eddystone概要と事例Eddystone概要と事例
Eddystone概要と事例
 
近距離無線通信技術を利用した新しいモバイルソリューション
近距離無線通信技術を利用した新しいモバイルソリューション近距離無線通信技術を利用した新しいモバイルソリューション
近距離無線通信技術を利用した新しいモバイルソリューション
 
Beaconのお話
Beaconのお話Beaconのお話
Beaconのお話
 
BLEくびかりぞく
BLEくびかりぞくBLEくびかりぞく
BLEくびかりぞく
 
HTML5から始まる技術革新
HTML5から始まる技術革新HTML5から始まる技術革新
HTML5から始まる技術革新
 
AndroidとiOSのBLEな事情 3
AndroidとiOSのBLEな事情 3AndroidとiOSのBLEな事情 3
AndroidとiOSのBLEな事情 3
 
HTML5から始まる技術革新 @ 2015/1
HTML5から始まる技術革新 @ 2015/1HTML5から始まる技術革新 @ 2015/1
HTML5から始まる技術革新 @ 2015/1
 
HTML5時代でもFlashとかを使い続ける漢達
HTML5時代でもFlashとかを使い続ける漢達HTML5時代でもFlashとかを使い続ける漢達
HTML5時代でもFlashとかを使い続ける漢達
 
ブラウザから飛び出すWeb技術とHTML5
ブラウザから飛び出すWeb技術とHTML5ブラウザから飛び出すWeb技術とHTML5
ブラウザから飛び出すWeb技術とHTML5
 
Web標準技術だけでロボ
Web標準技術だけでロボWeb標準技術だけでロボ
Web標準技術だけでロボ
 
Pepper,Robi..コミュニケーションロボットと僕らの新しい関係
Pepper,Robi..コミュニケーションロボットと僕らの新しい関係Pepper,Robi..コミュニケーションロボットと僕らの新しい関係
Pepper,Robi..コミュニケーションロボットと僕らの新しい関係
 
基板とブラウザと私
基板とブラウザと私基板とブラウザと私
基板とブラウザと私
 
Web技術を幅広く
Web技術を幅広くWeb技術を幅広く
Web技術を幅広く
 

Similar to InfoTalk#17 1st

WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)
Shumpei Shiraishi
 
Koubei banquet 30
Koubei banquet 30Koubei banquet 30
Koubei banquet 30
Koubei UED
 
夜宴30期《HTML5 is coming》
夜宴30期《HTML5 is coming》夜宴30期《HTML5 is coming》
夜宴30期《HTML5 is coming》
Koubei Banquet
 
Html5で変わるいろんなこと
Html5で変わるいろんなことHtml5で変わるいろんなこと
Html5で変わるいろんなこと
Masakazu Muraoka
 

Similar to InfoTalk#17 1st (20)

HTML5のご紹介
HTML5のご紹介HTML5のご紹介
HTML5のご紹介
 
HTML5 History & Features
HTML5 History & FeaturesHTML5 History & Features
HTML5 History & Features
 
Looking into HTML5 + CSS3
Looking into HTML5 + CSS3Looking into HTML5 + CSS3
Looking into HTML5 + CSS3
 
WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)
 
Koubei banquet 30
Koubei banquet 30Koubei banquet 30
Koubei banquet 30
 
夜宴30期《HTML5 is coming》
夜宴30期《HTML5 is coming》夜宴30期《HTML5 is coming》
夜宴30期《HTML5 is coming》
 
Html5で変わるいろんなこと
Html5で変わるいろんなことHtml5で変わるいろんなこと
Html5で変わるいろんなこと
 
Demystifying HTML5
Demystifying HTML5Demystifying HTML5
Demystifying HTML5
 
いま使われているHTML5と、これからのHTML5
いま使われているHTML5と、これからのHTML5いま使われているHTML5と、これからのHTML5
いま使われているHTML5と、これからのHTML5
 
Html5 Primer
Html5 PrimerHtml5 Primer
Html5 Primer
 
Html5 drupal7 with mandakini kumari(1)
Html5 drupal7 with mandakini kumari(1)Html5 drupal7 with mandakini kumari(1)
Html5 drupal7 with mandakini kumari(1)
 
Change by HTML5
Change by HTML5Change by HTML5
Change by HTML5
 
Screw HTML5, make cool shit with AIR
Screw HTML5, make cool shit with AIRScrew HTML5, make cool shit with AIR
Screw HTML5, make cool shit with AIR
 
ニコニコ動画でのHTML5
ニコニコ動画でのHTML5ニコニコ動画でのHTML5
ニコニコ動画でのHTML5
 
スマートフォンサイトの作成術 - 大川洋一
スマートフォンサイトの作成術 - 大川洋一スマートフォンサイトの作成術 - 大川洋一
スマートフォンサイトの作成術 - 大川洋一
 
html5 an introduction
html5 an introductionhtml5 an introduction
html5 an introduction
 
So you want to build a mobile app - HTML5 vs. Native @ the Boston Mobile Expe...
So you want to build a mobile app - HTML5 vs. Native @ the Boston Mobile Expe...So you want to build a mobile app - HTML5 vs. Native @ the Boston Mobile Expe...
So you want to build a mobile app - HTML5 vs. Native @ the Boston Mobile Expe...
 
10 Jahre Webentwicklung - am Beispiel des Frameworks qooxdoo
10 Jahre Webentwicklung - am Beispiel des Frameworks qooxdoo10 Jahre Webentwicklung - am Beispiel des Frameworks qooxdoo
10 Jahre Webentwicklung - am Beispiel des Frameworks qooxdoo
 
HTML5 and Beyond
HTML5 and BeyondHTML5 and Beyond
HTML5 and Beyond
 
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
 

More from Wakasa Masao (6)

思い立ったらJSオンリーで 作ってみて体験して失敗できる LINE Things
思い立ったらJSオンリーで 作ってみて体験して失敗できる LINE Things思い立ったらJSオンリーで 作ってみて体験して失敗できる LINE Things
思い立ったらJSオンリーで 作ってみて体験して失敗できる LINE Things
 
WebBluetoothなど - JSで制御するBluetoothと基板の勉強会 -
WebBluetoothなど	- JSで制御するBluetoothと基板の勉強会 -WebBluetoothなど	- JSで制御するBluetoothと基板の勉強会 -
WebBluetoothなど - JSで制御するBluetoothと基板の勉強会 -
 
シャクレ - 写真くれくれサービス -
シャクレ - 写真くれくれサービス -シャクレ - 写真くれくれサービス -
シャクレ - 写真くれくれサービス -
 
ハードウェアこわい(字幕版) - HTML5オールスターズ
ハードウェアこわい(字幕版) -  HTML5オールスターズハードウェアこわい(字幕版) -  HTML5オールスターズ
ハードウェアこわい(字幕版) - HTML5オールスターズ
 
ハードウェアこわい - HTML5オールスターズ
ハードウェアこわい - HTML5オールスターズハードウェアこわい - HTML5オールスターズ
ハードウェアこわい - HTML5オールスターズ
 
Html5 by gis tec
Html5 by gis tecHtml5 by gis tec
Html5 by gis tec
 

Recently uploaded

SPLICE Working Group: Reusable Code Examples
SPLICE Working Group:Reusable Code ExamplesSPLICE Working Group:Reusable Code Examples
SPLICE Working Group: Reusable Code Examples
Peter Brusilovsky
 
Spellings Wk 4 and Wk 5 for Grade 4 at CAPS
Spellings Wk 4 and Wk 5 for Grade 4 at CAPSSpellings Wk 4 and Wk 5 for Grade 4 at CAPS
Spellings Wk 4 and Wk 5 for Grade 4 at CAPS
AnaAcapella
 

Recently uploaded (20)

OSCM Unit 2_Operations Processes & Systems
OSCM Unit 2_Operations Processes & SystemsOSCM Unit 2_Operations Processes & Systems
OSCM Unit 2_Operations Processes & Systems
 
diagnosting testing bsc 2nd sem.pptx....
diagnosting testing bsc 2nd sem.pptx....diagnosting testing bsc 2nd sem.pptx....
diagnosting testing bsc 2nd sem.pptx....
 
VAMOS CUIDAR DO NOSSO PLANETA! .
VAMOS CUIDAR DO NOSSO PLANETA!                    .VAMOS CUIDAR DO NOSSO PLANETA!                    .
VAMOS CUIDAR DO NOSSO PLANETA! .
 
Improved Approval Flow in Odoo 17 Studio App
Improved Approval Flow in Odoo 17 Studio AppImproved Approval Flow in Odoo 17 Studio App
Improved Approval Flow in Odoo 17 Studio App
 
How to Send Pro Forma Invoice to Your Customers in Odoo 17
How to Send Pro Forma Invoice to Your Customers in Odoo 17How to Send Pro Forma Invoice to Your Customers in Odoo 17
How to Send Pro Forma Invoice to Your Customers in Odoo 17
 
PSYPACT- Practicing Over State Lines May 2024.pptx
PSYPACT- Practicing Over State Lines May 2024.pptxPSYPACT- Practicing Over State Lines May 2024.pptx
PSYPACT- Practicing Over State Lines May 2024.pptx
 
24 ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH SỞ GIÁO DỤC HẢI DƯ...
24 ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH SỞ GIÁO DỤC HẢI DƯ...24 ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH SỞ GIÁO DỤC HẢI DƯ...
24 ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH SỞ GIÁO DỤC HẢI DƯ...
 
8 Tips for Effective Working Capital Management
8 Tips for Effective Working Capital Management8 Tips for Effective Working Capital Management
8 Tips for Effective Working Capital Management
 
SPLICE Working Group: Reusable Code Examples
SPLICE Working Group:Reusable Code ExamplesSPLICE Working Group:Reusable Code Examples
SPLICE Working Group: Reusable Code Examples
 
How to Manage Website in Odoo 17 Studio App.pptx
How to Manage Website in Odoo 17 Studio App.pptxHow to Manage Website in Odoo 17 Studio App.pptx
How to Manage Website in Odoo 17 Studio App.pptx
 
OS-operating systems- ch05 (CPU Scheduling) ...
OS-operating systems- ch05 (CPU Scheduling) ...OS-operating systems- ch05 (CPU Scheduling) ...
OS-operating systems- ch05 (CPU Scheduling) ...
 
Including Mental Health Support in Project Delivery, 14 May.pdf
Including Mental Health Support in Project Delivery, 14 May.pdfIncluding Mental Health Support in Project Delivery, 14 May.pdf
Including Mental Health Support in Project Delivery, 14 May.pdf
 
Analyzing and resolving a communication crisis in Dhaka textiles LTD.pptx
Analyzing and resolving a communication crisis in Dhaka textiles LTD.pptxAnalyzing and resolving a communication crisis in Dhaka textiles LTD.pptx
Analyzing and resolving a communication crisis in Dhaka textiles LTD.pptx
 
Spellings Wk 4 and Wk 5 for Grade 4 at CAPS
Spellings Wk 4 and Wk 5 for Grade 4 at CAPSSpellings Wk 4 and Wk 5 for Grade 4 at CAPS
Spellings Wk 4 and Wk 5 for Grade 4 at CAPS
 
An Overview of the Odoo 17 Knowledge App
An Overview of the Odoo 17 Knowledge AppAn Overview of the Odoo 17 Knowledge App
An Overview of the Odoo 17 Knowledge App
 
Spring gala 2024 photo slideshow - Celebrating School-Community Partnerships
Spring gala 2024 photo slideshow - Celebrating School-Community PartnershipsSpring gala 2024 photo slideshow - Celebrating School-Community Partnerships
Spring gala 2024 photo slideshow - Celebrating School-Community Partnerships
 
Observing-Correct-Grammar-in-Making-Definitions.pptx
Observing-Correct-Grammar-in-Making-Definitions.pptxObserving-Correct-Grammar-in-Making-Definitions.pptx
Observing-Correct-Grammar-in-Making-Definitions.pptx
 
DEMONSTRATION LESSON IN ENGLISH 4 MATATAG CURRICULUM
DEMONSTRATION LESSON IN ENGLISH 4 MATATAG CURRICULUMDEMONSTRATION LESSON IN ENGLISH 4 MATATAG CURRICULUM
DEMONSTRATION LESSON IN ENGLISH 4 MATATAG CURRICULUM
 
Trauma-Informed Leadership - Five Practical Principles
Trauma-Informed Leadership - Five Practical PrinciplesTrauma-Informed Leadership - Five Practical Principles
Trauma-Informed Leadership - Five Practical Principles
 
Stl Algorithms in C++ jjjjjjjjjjjjjjjjjj
Stl Algorithms in C++ jjjjjjjjjjjjjjjjjjStl Algorithms in C++ jjjjjjjjjjjjjjjjjj
Stl Algorithms in C++ jjjjjjjjjjjjjjjjjj
 

InfoTalk#17 1st